<template>
	<view class="register" :style="{height:wh+'px'}">
		<!-- 显示上方的图片 -->
		<view class="title" style="font-size: 30px;color: cadetblue;margin-left: 30px;">
			用户注册
		</view>
		<view class="content">
			<uni-forms ref="form" :rules="rules" :model="regForm" validateTrigger="blur">
				<uni-forms-item name="username">
					<uni-easyinput prefix-icon="person" v-model="regForm.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput prefix-icon="locked" type="password" v-model="regForm.password"
						placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="password2">
					<uni-easyinput prefix-icon="locked" type="password" v-model="regForm.password2"
						placeholder="请输入重复密码" />
				</uni-forms-item>
			<!-- 	<uni-forms-item name="email">
					<uni-easyinput prefix-icon="email" v-model="regForm.email" placeholder="请输入邮箱" />
				</uni-forms-item> -->
				<uni-forms-item name="mobilePhoneNumber">
					<uni-easyinput prefix-icon="phone" type="number" v-model="regForm.mobilePhoneNumber"
						placeholder="请输入手机" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="register(form)">注册</button>
		</view>
		<view class="login">
			<navigator url="/pages/login/login">已有账号，去登录</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onReady
	} from "@dcloudio/uni-app"
	import {
		CONFIG
	} from "../../utils/config"

	let store = userStore()
	const regForm = ref({
		username: '',
		password: '',
		password2: '',
		mobilePhoneNumber: ''
	})
	import {
				userStore
			} from "../../store/userStrore.js"
	const form = ref(null)

	function toLogin() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
	const wh = ref(0)
	onReady(() => {
		wh.value = uni.getWindowInfo().windowHeight
		console.log(uni.getWindowInfo().windowHeight)
	})

	function register() {
		form.value.validate().then(res => {
			delete res.password2
			console.log(res);
			//验证通过,进行接口请求用户注册
			uni.$post(CONFIG.leanCloud_url + "/1.1/users", res).then(res2 => {
				if (res2.statusCode == 201) {
					uni.showToast({
						title: "注册成功,重新登录",
						icon: "success"
					})
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					let msg = ""
					switch (res2.data.code) {
						case 214:
							msg = "手机号码已经被注册"
							break
						case 203:
							msg = "电子邮箱地址已经被占用"
							break
						case 202:
							msg = "用户名已经被占用"
							break
					}
					uni.showToast({
						title: msg,
						icon: "none"
					})
				}
				console.log(res2)
			}).catch(err => {
				console.log(err)
			})
			//返回码400表示注册失败。显示错误信息


		}).catch(err => {
			// 验证失败
			console.log(err);
		})
	}

	const rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: "请输入用户名"
				},
				{
					pattern: "^\\w{3,10}$",
					errorMessage: '请输入3-10位数字字母和下划线作为用户名'
				}
			]
		},
		password: {
			rules: [{
					required: true,
					errorMessage: "请输入密码"
				},
				{
					pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
					errorMessage: '请输入3-10位数字字母和特殊字符密码'
				}
			]
		},
		password2: {
			rules: [{
					required: true,
					errorMessage: "请输入密码"
				},
				{
					pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
					errorMessage: '请输入3-10位数字字母和特殊字符密码'
				},
				{
					// 自定义验证规则validateFunction名称固定
					// rule : 当前校验字段在 rules 中所对应的校验规则
					// value : 当前校验字段的值
					// data : 所有校验字段的字段和值的对象
					// callback : 校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可 ，如果需要显示不同的 errMessage，如果校验不通过需要执行 callback('提示错误信息')，如果校验通过，执行callback()即可
					validateFunction: (rule, value, data, callback) => {
						console.log(value, data.password);
						if (value != data.password) {
							// 验证失败,执行callback("......")
							callback("两次输入的密码不一致")
						}
						//验证成功，返回true
						return true
					}
				}
			]
		},
		mobilePhoneNumber: {
			rules: [{
				required: true,
				errorMessage: "请输入手机号码"
			}, {
				pattern: '^1[3-9]\\d{9}$',
				errorMessage: "电话号码格式错误"
			}]
		},
	})	
</script>

<style scoped>
	body{
		background-color: gainsboro;
	}
	.register {
		border: 1px solid white;
		position: relative;
	}

	.register .title {
		margin-top: 70px;

	}

	.register .title image:nth-child(1) {
		height: 50px;
	}

	.register .title image:nth-child(2) {
		height: 30px;
	}

	.register .content {
		margin: 10px 20px;
	}

	.register .login {
		position: absolute;
		width: 100vw;
		text-align: center;
		color: #007aff;
		bottom: 20px;
		font-size: 20rpx;
	}
</style>